<template>
    <div class="header" @click="onclick" :style="{ background:bgColor}">
        {{ num }}
    </div>
    <hr>
    <div>

        <h3>v-on的指令 主要针对事件</h3>
        <span>商超购买商品的数量：{{ count }}</span><br>
        <button v-on:click="count++">购买一件</button>
        <button @click="addBtn(5)">购买5件</button>
        <button @click="edit">减少1</button>
        <span>字符串翻转</span>
        <h2>{{ msg }}</h2>
        <h3>{{ msg2 }}</h3>
        <button @click="msgBtn">点击翻转</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const msg = ref('hello world')
var msg2 = 'hello world'
const num = ref(10)
const bgColor = ref('#ff0000')
const addBtn = (num) => { 
    //this在组合api中是不支持的
    //this.count += num

    count.value +=num
}
function edit() {
    count.value --
}
const msgBtn = () => { 
    console.log(msg.value.split('').reverse().join(''));
    msg.value = msg.value.split('').reverse().join('')
    msg2= msg2.split('').reverse().join('')

}
const onclick = () => { 
    num.value++
    //随机更改背景颜色
    //随机数 Math.random() 0-1
    console.log(String(Math.random()).substring(3,9));
    bgColor.value = '#' + String(Math.random()).substring(3, 9)


}

</script>

<style scoped>
.header{
    width: 150px;
    height: 150px;
   
}
</style>